<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>S9060-UI设计作品集</title>
  <meta name="description" content="提供用户体验设计与互联网品牌建设，原型图设计 、UI界面设计、网站设计开发、移动界面设计、软件界面设计、logo设计、创意设计、视频剪辑、视频制作等服务">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Favicon -->
  <link rel="SHORTCUT ICON" href="./static/image/favicon.png" type="image/png">

  <!-- bootstrap CSS -->
  <link rel="stylesheet" href="./static/css/bootstrap.min.css" type="text/css" media="all">
  <!-- carousel CSS -->
  <link rel="stylesheet" href="./static/css/owl.carousel.min.css" type="text/css" media="all">

  <!-- nivo-slider CSS -->
  <link rel="stylesheet" href="./static/css/nivo-slider.css" type="text/css" media="all">
  <!-- animate CSS -->
  <link rel="stylesheet" href="./static/css/animate.css" type="text/css" media="all">
  <!-- animated-text CSS -->
  <link rel="stylesheet" href="./static/css/animated-text.css" type="text/css" media="all">
  <!-- font-awesome CSS -->
  <link rel="stylesheet" href="./static/css/all.min.css" type="text/css" media="all">
  <!-- font-flaticon CSS -->
  <link rel="stylesheet" href="./static/css/flaticon.css" type="text/css" media="all">
  <!-- theme-default CSS -->
  <link rel="stylesheet" href="./static/css/theme-default.css" type="text/css" media="all">
  <!-- meanmenu CSS -->
  <link rel="stylesheet" href="./static/css/meanmenu.min.css" type="text/css" media="all">
  <link rel="stylesheet" href="./static/css/font-awesome.min.css" type="text/css" media="all">
  <!-- Main Style CSS -->
  <link rel="stylesheet" href="./static/css/style.css" type="text/css" media="all">
  <!-- transitions CSS -->
  <link rel="stylesheet" href="./static/css/owl.transitions.css" type="text/css" media="all">
  <!-- venobox CSS -->
  <link rel="stylesheet" href="./static/css/venobox.css" type="text/css" media="all">
  <!-- widget CSS -->
  <link rel="stylesheet" href="./static/css/widget.css" type="text/css" media="all">
  <!-- responsive CSS -->
  <link rel="stylesheet" href="./static/css/responsive.css" type="text/css" media="all">
  <!-- modernizr js -->
  <script src="./static/js/modernizr-3.5.0.min.js"></script>
  <link href='./static/css/css.css' rel='stylesheet' type='text/css'>
  <link href='./static/css/index.css' rel='stylesheet' type='text/css'>

</head>

<body>
  <div class="main-header">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div id="sticky-header d-none" class="nav-menu">
            <div class="header-logo">
              <a href="index.html">
                <!-- <img src="./static/picture/logo.png" alt=""> -->
                <img class="logo-1" src="./static/image/logo/logo-1.png" alt="">
              </a>
              <a class="main_sticky" href="">
                <!-- <img src="./static/picture/logo.png" alt=""> -->
                <img class="logo-1" src="./static/image/logo/logo-1.png" alt="">
              </a>
            </div>
            <div class="heder-menu">
              <ul>
                <!-- <li><a href="#home">HOME </a></li> -->
                <!-- <li><a href="#about">about </a></li> -->
                <!-- <li><a href="#services">服务范围</a></li> -->
                <!-- <li><a href="#resum">resum </a></li> -->
                <!-- <li><a href="#portfolio">作品展示 </a></li> -->
                <!-- <li><a href="#blog">blog </a></li> -->
                <li><a href="#contact">联系方式 </a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ============================================================== -->
  <!-- Start - Mobile-Menu- Section -->
  <!-- 隐藏 -->
  <!-- ============================================================= -->
  <div class="mobile-menu-area d-sm-block d-md-block d-lg-none">
    <div class="mobile-menu">
      <nav class="itsoft_menu">
        <ul class="nav_scroll">
          <!-- <li><a href="#home">HOME </a></li> -->
          <!-- <li><a href="#services">服务范围</a></li> -->
          <!-- <li><a href="#portfolio">作品展示 </a></li> -->
          <li><a href="#contact">联系方式 </a></li>
        </ul>
      </nav>
    </div>
  </div>
  <!--==================================================-->
  <!-- Start breadcumb-area -->
  <!-- 隐藏 -->
  <!--==================================================-->
  <!-- <div class="breadcumb-area d-flex align-items-center d-none">
    <div class="container d-none">
      <div class="row">
        <div class="col-lg-12">
          <div class="breacumb-content">
            <div class="breadcumb-title">
              <h1>作品详情</h1>
            </div>
            <div class="breadcumb-content-text">
              <a href="../index.html"> Home<i class="fa fa-angle-right"></i><span>作品详情</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <!--==================================================-->
  <!-- Start blog-area -->
  <!--==================================================-->
  <div class="blog-areas">
    <div class="container">
      <div class="row">
        <!-- <div class="col-lg-8"> -->
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-12">
              <div class="blogs-singles-boxs">
                <div class="blog-thumb">
                  <img src="./static/image/ui作品集/封面目录/01-1-封面.jpg" alt="">
                  <img src="./static/image/ui作品集/封面目录/02-目录.jpg" alt="">
                  <!-- 01 -->
                  <img src="./static/image/ui作品集/01-APP设计/03.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/04.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/05.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/06.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/07.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/08.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/09.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/10.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/11.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/12.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/13.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/14.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/15.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/16.jpg" alt="">
                  <img src="./static/image/ui作品集/01-APP设计/17.jpg" alt="">
                  <!-- 02 -->
                  <img src="./static/image/ui作品集/02-WEB&后台设计/18.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/19.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/20.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/21.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/22.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/23.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/24.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/25.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/26.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/27.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/28.jpg" alt="">
                  <img src="./static/image/ui作品集/02-WEB&后台设计/系统2/29.jpg" alt="">
                  <!-- 03 -->
                  <img src="./static/image/ui作品集/03-运营设计/30.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/31.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/32.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/33.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/34.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/35.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/36.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/37.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/38.jpg" alt="">
                  <img src="./static/image/ui作品集/03-运营设计/39.jpg" alt="">
                  <!-- 04 -->
                  <img src="./static/image/ui作品集/04-其它作品/40.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/41.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/42.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/43.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/44.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/45.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/46.jpg" alt="">
                  <img src="./static/image/ui作品集/04-其它作品/47.jpg" alt="">

                </div>
                <div class="blogs-content d-none">
                  <div class="blog-left">
                    <ul>
                      <li><a href="#"></a> <span>Bioza</span></li>
                      <li class="bf"><a href="#"></a> <span>Mar 19, 2022</span></li>
                      <li><a href="#"></a> <span> 0 Comments</span></li>
                    </ul>
                  </div>
                  <p>Quickly expedite interactive Modern <br> promote deliverables</p>
                  <p>Lorem ipsum dolor sit amet consectet adipisie cing elit sed eiusmod tempor
                    incididunt on labore et dolore. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                  <p>Bccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                    id est there laborum. Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium ware doloremque laudantium, totam rem
                    aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                    vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia on voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni
                    dolores eos query ratione voluptatem sequi nesciunt. Neque porro quisquam</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    dolor an incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud there exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure poor dolor in reprehenderit in
                    voluptate velit esse cillum</p>
                  <div class="blog-details-tmb">
                    <img src="./static/picture/bd1.jpg" alt="">
                  </div>
                  <h2><a href="">Setting the mood with incense</a></h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    dolor an incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud there exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure poor dolor in reprehenderit in
                    voluptate velit esse cillum</p>
                  <h2><a href="">Setting the mood with incense</a></h2>
                  <p>Bccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                    id est there laborum. Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium ware doloremque laudantium, totam rem
                    aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                    vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia on voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni
                    dolores eos query ratione voluptatem sequi nesciunt. Neque porro quisquam</p>
                </div>
                <div class="paginationss d-none">
                  <div class="paginationss-title">
                    <ul>
                      <li><a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
                      </li>
                      <li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
                      <li><a href="https://www.pinterest.com/"><i class="fab fa-pinterest"></i></a></li>
                      <li><a href="https://dribbble.com/"><i class="fab fa-dribbble"></i></a></li>
                      <li><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
                      </li>
                      <li><a href="https://www.reddit.com/"><i class="fa fa-reddit"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-12 d-none">
              <div class="single-contact-box">
                <div class="contact-title">
                  <h3>Leave Comment</h3>
                  <div class="bg-bar"></div>
                </div>
                <form action="#" method="POST" id="dreamit-form">
                  <div class="row">
                    <div class="col-lg-6 col-md-6">
                      <div class="form_box">
                        <input type="text" name="name" placeholder="Name">
                      </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                      <div class="form_box">
                        <input type="text" name="email" placeholder="Email">
                      </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                      <div class="form_box">
                        <input type="text" name="Subject" placeholder="Subject">
                      </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                      <div class="form_box">
                        <textarea name="massage" id="massage" cols="30" rows="10" placeholder="Your Massage"></textarea>
                      </div>
                      <div class="form-button">
                        <button type="submit">Post Comment <i class="fa fa-angle-right"></i></button>
                      </div>
                    </div>
                  </div>
                </form>
                <div id="status"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 d-none">
          <div class="sideber-search-box">
            <div class="sidebar-search">
              <input class="form-control" type="text" name="search" placeholder="Search....">
              <button type="submit"><i class="fas fa-search"></i></button>
            </div>
          </div>
          <div class="sideber-box">
            <div class="sideber-content">
              <div class="sideber-title">
                <h3>设计文章</h3>
              </div>
              <div class="bg-bar"></div>
            </div>
            <div class="resent-post-single-box">
              <div class="resent-thunb">
                <img src="./static/image/details/right/blog_1.jpg" alt="">
              </div>
              <div class="resent-content">
                <div class="resent-title">
                  <a href="https://www.uisdc.com/navigation-bar-design-2">
                    <h3>如何做好B端产品的导航栏设计?</h3>
                  </a>
                  <a href="JavaScript: void(0)"><span>B端设计</span></a>
                </div>
              </div>
            </div>
            <div class="resent-post-single-box">
              <div class="resent-thunb">
                <img src="./static/image/details/right/blog_2.jpg" alt="">
              </div>
              <div class="resent-content">
                <div class="resent-title">
                  <a href="https://www.uisdc.com/website-navigation-design">
                    <h3>用一个实战案例，帮你学会优化顶部导航设计</h3>
                  </a>
                  <a href="JavaScript: void(0)"><span>B端设计</span></a>
                </div>
              </div>
            </div>
            <div class="resent-post-single-box two">
              <div class="resent-thunb">
                <img src="./static/image/details/right/blog_3.jpg" alt="">
              </div>
              <div class="resent-content">
                <div class="resent-title">
                  <a href="https://www.uisdc.com/cognitive-design-system-2">
                    <h3>设计系统搭建全流程：开始前的准备工作</h3>
                  </a>
                  <a href="JavaScript: void(0)"><span>B端设计</span></a>
                </div>
              </div>
            </div>
          </div>
          <div class="sideber-box">
            <div class="sideber-content">
              <div class="sideber-title">
                <h3>AI创作</h3>
              </div>
              <div class="bg-bar"></div>
            </div>
            <div class="catagories-body">
              <ul>
                <li><a href="https://www.uisdc.com/7-ai-plug-in"> 有这7个超好用插件, 你也能成为顶级AI绘画师! </a></li>
                <li><a href="https://www.uisdc.com/ai-in-logo"> AI助力Logo设计! 5类关键词帮你快速获取高质量灵感 </a></li>
              </ul>
            </div>
          </div>
          <div class="sideber-box">
            <div class="sideber-content">
              <div class="sideber-title">
                <h3>优设读报</h3>
              </div>
              <div class="bg-bar"></div>
            </div>
            <div class="catagories-body">
              <ul>
                <li><a href="https://www.uisdc.com/news"> AIGC趋势</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--==================================================-->
  <!-- Start Search Popup Area -->
  <!-- 底部 -->
  <!--==================================================-->
  <div class="footerboxs" id="contact">
    <div class="container">

      <div class="row">
        <div class="copy-right-icon footer-box">
          <ul class="box-1">
            <!-- <li><a href="#"><i class="fa fa-dribbble"></i></a></li> -->
            <!-- <li><a href="#"><i class="fa fa-wechat"></i></a></li> -->
            <!-- <li><a href="#"><i class="fa fa-phone"></i></a></li> -->
            <li><a href="JavaScript: void(0)"><i class="fa fa-qq"></i></a><span>845388338</span></li>
            <li><a href="#"><i class="fa fa-send"></i></a><span>845388338@qq.com</span></li>
            <li><a href="JavaScript: void(0)"><i class="fa fa-phone-square"></i></a><span>17302021619</span>
            </li>
            <!-- <li class="img-box"><img src="./static/image/weixin/weixin.png" alt="微信"></li> -->
          </ul>
        </div>
      </div>

      <div class="row">
        <div class="wx-box"><img src="./static/image/weixin/weixin.png" alt="微信"></div>
      </div>
    </div>
  </div>
  <div class="footer-area copyright">Copyright © 2023. Swaveye9060 版权所有</div>







  <!--==================================================-->
  <!-- Start Search Popup Area -->
  <!--==================================================-->
  <div class="search-popup">
    <button class="close-search style-two"><i class="fa fa-times"></i></button>
    <button class="close-search"><i class="fas fa-arrow-up"></i></button>
    <form method="post" action="#">
      <div class="form-group">
        <input type="search" name="search-field" value="" placeholder="Search Here" required="">
        <button type="submit"><i class="fa fa-search"></i></button>
      </div>
    </form>
  </div>

  <!-- scroll strat============  -->
  <div class="scroll-area">
    <div class="top-wrap">
      <div class="go-top-btn-wraper">
        <div class="go-top go-top-button">
          <i class="fa fa-angle-double-up" aria-hidden="true"></i>
          <i class="fa fa-angle-double-up" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
  <!-- scroll end============  -->



  <!-- jquery js -->
  <script src="./static/js/jquery-3.2.1.min.js"></script>
  <!-- bootstrap js -->
  <script src="./static/js/bootstrap.min.js"></script>
  <!-- carousel js -->
  <script src="./static/js/owl.carousel.min.js"></script>
  <!-- counterup js -->
  <script src="./static/js/jquery.counterup.min.js"></script>
  <!-- waypoints js -->
  <script src="./static/js/waypoints.min.js"></script>
  <!-- wow js -->
  <script src="./static/js/wow.js"></script>
  <!-- imagesloaded js -->
  <script src="./static/js/imagesloaded.pkgd.min.js"></script>
  <!-- venobox js -->
  <script src="./static/js/venobox.js"></script>
  <!-- ajax mail js -->
  <script src="./static/js/ajax-mail.js"></script>
  <!--  animated-text js -->
  <script src="./static/js/animated-text.js"></script>
  <!-- venobox min js -->
  <script src="./static/js/venobox.min.js"></script>
  <!-- isotope js -->
  <script src="./static/js/isotope.pkgd.min.js"></script>
  <!-- jquery nivo slider pack js -->
  <script src="./static/js/jquery.nivo.slider.pack.js"></script>
  <!-- jquery meanmenu js -->
  <script src="./static/js/jquery.meanmenu.js"></script>
  <script src="./static/js/popper.min.js"></script>
  <!-- jquery scrollup js -->
  <script src="./static/js/jquery.scrollUp.js"></script>
  <!-- theme js -->
  <script src="./static/js/theme.js"></script>
  <script src="./static/js/jquery.barfiller.js"></script>

  <!-- jquery js -->




  <script>
    $(document).ready(function () {

      $('.aa').counterUp({
        delay: 10,
        time: 1000
      });


    });
  </script>

  <script>
    (function ($) {
      $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

      $('.accordion a').click(function (j) {
        var dropDown = $(this).closest('li').find('p');

        $(this).closest('.accordion').find('p').not(dropDown).slideUp();

        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
        } else {
          $(this).closest('.accordion').find('a.active').removeClass('active');
          $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
      });
    })(jQuery);
  </script>

</body>

</html>